<template>
  <view>
    <!-- 侧边栏 -->
    <filter-aside></filter-aside>
    <!-- 顶部导航 -->
    <nav-bar></nav-bar>
    <view class="tabs-outer-container">
      <u-sticky bgColor="#fff">
        <u-tabs
          :list="categoryList"
          :scrollable="false"
          @click="handlerChangeCate"
          :current="selectIndex"
        ></u-tabs>
      </u-sticky>
    </view>
    <goods-list :goodsList="goodsList"></goods-list>
    <view class="tabbar"></view>
  </view>
</template>

<script>
import GoodsList from '../../components/GoodsList.vue'
export default {
  data() {
    return {
      categoryList: [],
      currentCid: 1, // 默认分类id
      selectIndex: 0, // 菜单选中的索引
      goodsList: [],
      pageNo: 1, // 当前页码
      limit: 8, // 一页数量
      isReachBottom: true, // 是否还可触底加载
    }
  },
  methods: {
    // 获取分类列表
    async getCategoryList() {
      try {
        const categoryListData = await this.$get('/1.1/classes/classify')
        this.categoryList = categoryListData.results
        this.categoryList.forEach((item, index) => {
          item.name = item.bname
        })
        this.getGoodsListByCid()
      } catch (e) {
        console.log(e)
      }
    },
    // 获取商品列表
    async getGoodsListByCid() {
      try {
        const { limit, pageNo } = this
        const skip = limit * (pageNo - 1)
        uni.showLoading({
          title: '加载中',
        })
        const goodsListData = await this.$get(
          `/1.1/classes/goods?where={"bcid":${this.currentCid}}&limit=${limit}&skip=${skip}`
        )
        uni.hideLoading()
        uni.stopPullDownRefresh()
        // 合并数据
        this.goodsList = [...this.goodsList, ...goodsListData.results]
        if (goodsListData.results.length === 0) {
          uni.showToast({
            title: '这回真没了',
            duration: 2000,
            icon: 'none',
          })
          this.isReachBottom = false
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 触底更新商品列表
    updateGoodsList() {
      this.pageNo++
      this.getGoodsListByCid()
    },
    // 清除数据
    clearData() {
      this.goodsList = []
      this.pageNo = 1
      this.isReachBottom = true
    },
    // 更变分类
    handlerChangeCate(cate) {
      this.clearData()
      // 拿最新的数据
      this.currentCid = cate.bid
      this.getGoodsListByCid()
    },
  },
  components: {
    'goods-list': GoodsList,
  },
  onLoad() {
    this.getCategoryList()
  },
  onShow() {
    uni.showTabBar()

    this.clearData()
    // 获取传递的参数
    const data = getApp().globalData.paramsData
    const bid = data ? data.bid : 1
    // 改变选中菜单的索引
    const selectIndex = this.categoryList.findIndex(item => item.bid == bid)
    this.selectIndex = selectIndex === -1 ? 0 : selectIndex
    // 拿数据
    this.currentCid = bid
    this.getGoodsListByCid()

    this.$bus.$emit('hideAside')
  },

  // 触底触发该函数
  onReachBottom() {
    this.isReachBottom && this.updateGoodsList()
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.clearData()
    this.getGoodsListByCid()
  },
}
</script>

<style lang="scss">
.tabs-outer-container {
  height: 88rpx;
  background-color: #fff;
  .u-sticky {
    position: fixed !important;
    top: 120rpx !important;
    left: 0;
    right: 0;
    z-index: 9999 !important;
  }
  .tabbar {
    height: var(--window-bottom) !important;
    background-color: red;
  }
}
</style>
